<template>
  <div @click="showType = false" class="c-flex-column c-h c-minh c-text-hidden">
    <div class="c-p-t0 c-p-l0 c-w100">
      <header v-if="sideList.length > 0" class="c-w100 c-flex-row c-aligni-center c-pl20">
        <section v-if="showShortType == 1" class="c-flex-grow1 c-w0 c-pr20 c-pt10">
          <my-small-tabbar :tabList="sideList" :tabIndex="activeIndex" @changeTab="clickSilde" :isGroupList="true" :isScroll="true" :flexClass="''"
            :fontSet="{activeColor: 'c-fw-b', defaultColor: ''}" :tabNameClass="'c-fs24 c-pb12'"
          ></my-small-tabbar>
        </section>
        <span v-else @click="showSideList = true" class="c-fs26 c-pv32 c-fw-b c-flex-grow1 c-w0">{{sideList[activeIndex].groupName}}</span>
        <i v-if="showShortType == 1" @click="showSideList = true" :class="showSideList ? 'c-rotate180':''" class="c-ph20 c-pv20 iconfont c-fs14">&#xe6a9;</i>
        <gradient-button v-else @click.native="showSideList = true" class="btn-br-tbl20 c-flex-row c-aligni-center c-pl16 c-ww120 c-hh40 c-fs18 c-fc-white">
          <span class="c-pr10">全部分组</span>
          <i :class="showSideList ? 'c-rotate180':''" class="iconfont c-fs14">&#xe6a9;</i>
        </gradient-button>
      </header>
      <div class="c-ph24">
        <section class="c-w100 c-hh72 c-bd-b1 c-bd-t1 c-flex-row c-flex-center c-fs22 c-p">
          <span @click.stop="showType = !showType">{{typeList[prodTypeIndex].name}}</span>
          <i :class="showType ? 'c-rotate180':''" class="iconfont c-fs12 c-ml10">&#xe6a9;</i>
          <div class="type-box c-ww260 c-pa c-ph30 c-fs24" v-show="showType">
            <div @click="clickChangeType(index)" class="c-bd-b1 c-hh76 c-flex-row c-aligni-center" v-for="(item,index) in typeList" :key="index">
              <span class="c-flex-grow1 c-w0" :class="prodTypeIndex == index ? 'theme-fc':''">{{item.name}}</span>
              <i v-if="prodTypeIndex == index" class="iconfont theme-fc c-fs20">&#xe6ea;</i>
            </div>
          </div>
          <span class="c-fc-gray c-flex-grow1 c-w0 c-textAlign-r">共{{totalProdict}}个内容</span>
        </section>
      </div>

    </div>

    <section id="productScroll" @scroll="onScrollListen" class="c-ph24 c-flex-grow1 c-h0 c-contexty-scroll">
      <div @click="clickProductItem(index)" v-for="(item,index) in prodictList" :key="index" class="c-pv30 c-flex-row c-bd-b1">
        <div class="c-ww180 c-maxh120 c-text-hidden c-br5 c-p">
          <img class="c-w100" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" alt="" />
          <div class="type-icon" v-if="item.prodType == 5">{{item.courseType == 0 ? '视频' : item.courseType == 1 ? '音频' : '图文'}}</div>
          <div class="type-icon" v-else>{{prodTypeMap[item.prodType]}}</div>
        </div>
        <div class="c-flex-column c-pl20 c-flex-grow1 c-w0">
          <div class="c-fs24 c-hh88"><span class="c-text-ellipsis2">{{item.name}}</span></div>
          <div class="c-flex-row c-aligni-center c-lh20">
            <span v-if="item.payType == 3" class="theme-fc c-fs22 c-pr10">加密</span>
            <span v-else class="theme-fc c-fs22 c-pr10"><span v-if="item.payType ==2">{{'￥' | iosPriceFilter}}</span>{{item.payType ==2 ? item.price : '免费'}}</span>
            <span v-if="(item.permission == 17 || item.permission == 20) && item.payType ==2" class="c-br15 c-fs16 theme-fc theme-bd1 c-ph10 c-lh16 c-pv4">{{item.permission == 17 ? 'VIP免费' : 'SVIP免费'}}</span>
          </div>
        </div>
      </div>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无商品"></loading-status-tem>
    </section>
    <cj-popup v-model="showSideList" position="bottom" round @opened="showPopup" @closed="hidePopup">
      <header class="c-mh24 c-hh86 c-flex-row c-aligni-center c-bd-b1">
        <span class="c-fs30 c-fw-b c-flex-grow1 c-w0">商品分组</span>
      </header>
      <article class="c-hh540 c-ph24 c-contexty-auto">
        <section @click="clickSilde(index)" v-for="(item,index) in sideList" :key="index" class="c-hh80 c-fw400 c-flex-row c-aligni-center c-fs24 c-bd-b1" :class="activeIndex == index ? 'theme-fc':''">
          {{item.groupName}}
        </section>
      </article>

    </cj-popup>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import gradientButton from "@/components/templates/common/gradientButton.vue";
import { utilJs } from "@/utils/common.js";
import MySmallTabbar from '@/components/templates/common/MySmallTabbar.vue';
import { goDetails } from "@/utils/goDetails.js";
const LIMIT = 20;
const TYPE_LIST = [
  {
    id: 0,
    name: '筛选',
  },
  {
    id: 9,
    name: '专栏',
  },
  {
    id: 2,
    name: '视频',
  },
  {
    id: 3,
    name: '音频',
  },
  {
    id: 4,
    name: '图文',
  },
  {
    id: 51,
    name: '直播',
  },
];
let pageIndex = 1;
let curScollTop = 0;
export default {
  name: "GroupList",
  components: {
    gradientButton,
    loadingStatusTem,
    MySmallTabbar
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") || 'mb5_default',
      showShortType: 1,
      prodTypeIndex: 0,
      prodictList: [],
      totalProdict: 0,
      sideList: [],
      typeList: TYPE_LIST,
      prodTypeMap: {
        9: "专栏",
        10: "社群",
        11: "测评",
        51: "直播",
      },
      activeIndex: 0,
      dataStatus: 'HAS_MORE_DATA',
      showType: false,
      showSideList: false,
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    showPopup() {
      curScollTop = document.documentElement.scrollTop || document.body.scrollTop;
      document.querySelector('body').classList.add('open-disabled-scroll');
    },
    hidePopup() {
      document.querySelector('body').classList.remove('open-disabled-scroll');
      //关闭弹窗，恢复滚动位置
      window.scrollTo(0, curScollTop);
    },
    //更改类型
    clickChangeType(index) {
      this.showType = false;
      this.prodTypeIndex = index;
      pageIndex = 1;
      this.getProductList();
    },
    //点击左侧分组
    clickSilde(index) {
      this.showSideList = false;
      this.activeIndex = index;
      pageIndex = 1;
      this.scrollCurView();
      this.getProductList();
    },
    scrollCurView() {
      if (document.querySelectorAll('.tab-item').length > 0 && document.querySelectorAll('.tab-item').length > this.activeIndex) {
        document.querySelectorAll('.tab-item')[this.activeIndex].scrollIntoView({ block: "center", inline: "center" });
      }
    },
    //点击产品
    clickProductItem(index) {
      goDetails(this, this.prodictList[index].prodType, this.prodictList[index].prodId, '', this.prodictList[index].courseType);
    },
    //获取分组商品列表
    getProductList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      let postUrl = `${global.apiurl}productGroup/getContentList?pgId=${this.sideList[this.activeIndex].pgId}&limit=${LIMIT}&page=${pageIndex}`;
      if ([2, 3, 4].includes(TYPE_LIST[this.prodTypeIndex].id)) {
        //2 视频 3 音频 4 图文
        postUrl += `&prodType=5&courseType=${TYPE_LIST[this.prodTypeIndex].id * 1 - 2}`;
      } else if (TYPE_LIST[this.prodTypeIndex].id) {
        postUrl += `&prodType=${TYPE_LIST[this.prodTypeIndex].id}`;
      }
      utilJs.getMethod(postUrl, (res) => {
        if (pageIndex == 1) {
          this.prodictList = res.data;
        } else {
          this.prodictList = [...this.prodictList, ...res.data];
        }
        this.totalProdict = res.total * 1;
        if (res.last_page == pageIndex) {
          this.dataStatus = res.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
      }, failRes => {
        this.dataStatus = 'DATA_ERROR';
      });
    },
    //获取分组组名列表
    getSilderList() {
      utilJs.getMethod(`${global.apiurl}productGroup/getGroups`, (res) => {
        this.sideList = res.data;
        this.showShortType = res.nameStyle;
        let curSelectId = this.$route.query.pgId || -1;
        let curIndex = this.sideList.findIndex(item => { return item.pgId == curSelectId; })
        if (curIndex > -1) {
          this.clickSilde(curIndex)
        } else {
          this.clickSilde(0)
        }
        this.wechatShare();
      });
    },
    //监听加载更多
    onScrollListen() {
      let domScroll = document.getElementById('productScroll');
      if (domScroll.scrollTop + domScroll.clientHeight >= (domScroll.scrollHeight - 20) && this.dataStatus == 'HAS_MORE_DATA' && this.prodictList.length > 0) {
        this.getProductList();
      }
    },
    //分享
    wechatShare: function () {
      let title = this.sideList[this.activeIndex].groupName;//window.localStorage.getItem("shareTitle");
      let pgId = this.$route.query.pgId || '';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?pgId=${pgId}&refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.sideList[this.activeIndex].groupName;//window.localStorage.getItem("shareTitle");
      let pgId = this.$route.query.pgId || '';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?pgId=${pgId}&refereeId=${localStorage.getItem("userId")}`;
      utilJs.appShareTrue(title, "", shareUrl, "");
    }
  },
  activated() {
    setDocumentTitle("分组");
    this.prodTypeIndex = 0;
    this.activeIndex = 0;
    this.totalProdict = 0;
    this.showType = false;
    this.dataStatus = 'HAS_MORE_DATA';
    this.prodictList = [];
    this.sideList = [];
    this.getSilderList();
  },
  deactivated() {
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.ww106 {
  width: 2.65rem;
}
.type-box {
  z-index: 2;
  top: 1.75rem;
  left: 0;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 6px 15px 0px rgba(14, 19, 21, 0.16);
  border-radius: 8px;
}
.type-icon {
  position: absolute;
  top: 0.2rem;
  left: 0;
  width: 1rem;
  height: 0.5rem;
  font-size: 0.35rem;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0px 0.25rem 0.25rem 0px;
}
.btn-br-tbl20 {
  border-radius: 0.5rem 0px 0px 0.5rem;
}
</style>
